<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="注销会员"  center draggable overflow :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false ">

            <div class="content-box">
                注销后会员相关信息
                <span class="color-FF6A00">（余额、金币、积分）</span>
                将会被清空，请确认是否注销
            </div>
            <div class="footer-box">
                <el-button class="cancel" :loading="loading" @click="handleCancel">取消</el-button>
                <el-button class="submit" :loading="loading" @click="handleSubmit">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup>
import Api from '@/api'
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})
const visible = toRef(props, 'visible')

const vip = ref({})
const open = (params) => {
    console.log('params :>> ', params);
    vip.value = params
}
// 暴露方法
defineExpose({ open })


// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')

}
// 确认
let loading = ref(false)
const handleSubmit = (params) => {
    let data = {
        mobile: vip.value.mobile,
    }
    loading.value = true
    Api.Common.PcObjProcess.Do({ "functionName": "MemberLogoff", "contentData": data })
        .then(res => {
            console.log('注销 res :>> ', res);
            loading.value = false
            ElNotification({
                title: '提示',
                message: '注销成功',
                type: 'success',
            })
            emit('emitSubmit', 'cancel')
        })
        .catch(() => {
            loading.value = false
        })
}


</script>
  
<style  lang="scss" scoped>
.dialog-box {
    ::v-deep {
        .el-dialog {
            margin-top: 35vh;
            width: 480px;
            height: 266px;
            border-radius: 16px;
        }
    }
}

::v-deep(.el-dialog__header) {
  margin-top: 30px;
   
}

::v-deep(.el-dialog__title) {
  font-size: 24px;
  font-weight: bold;
  color: #212121;
   
}

::v-deep(.content-box) {
    width: 360px;
    height: 54px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #212121;
    line-height: 36px;
    margin:0px 40px 0px 41px;

}

.footer-box {
    margin-top: 30px;
    display: flex;
    justify-content: center;

    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
    }
}

::v-deep(.color-FF6A00) {
    color: #FF6A00;
}
</style>
  